<template>
  <!-- 轮播图-->
  <el-carousel height="450px" style="border-radius: 7px;">
    <el-carousel-item v-for="item in banners" :key="item">
      <el-image :src="item"/>
    </el-carousel-item>
  </el-carousel>
<!--  广告位-->
  <div class="ad">
    <ul>
      <li>
        <el-image src="/src/assets/ad.png"/>
      </li>
      <li>
        <el-image src="/src/assets/ad.png"/>
      </li>
      <li>
        <el-image src="/src/assets/ad.png"/>
      </li>
      <li>
        <el-image src="/src/assets/ad.png"/>
      </li>
    </ul>
  </div>
<!--  推荐的商品 -->
  <div class="recom" v-for="(category, index) in categoryGoodsList" :key="index">
    <div class="category" v-show="category.goodsList.length > 0">{{ category.name }}</div>
    <div class="goodList" v-show="category.goodsList.length > 0">
      <ul>
        <li v-for="(good, index) in category.goodsList" :key="index" @click="toGoodsView(good.id)">
          <div class="pic"><el-image :src="'/api/file/images/' + good.picList[0].url" /></div>
          <div class="name">{{ good.name }}</div>
          <div class="dscp">{{ good.dscp }}</div>
          <div class="price">￥ {{ good.price }}</div>
        </li>
      </ul>
    </div>
  </div>

</template>

<script setup>
import {ref} from "vue";
import categoryApi from "@/api/categoryApi.js";
import router from "@/router/index.js";

const banners = ref([
  "/src/assets/banner/banner1.png",
  "/src/assets/banner/banner2.png",
  "/src/assets/banner/banner3.png"
])
// 商品推荐
const categoryGoodsList = ref([])

// 获得商品推荐分类
const getCategoryGoodsList = () => {
  categoryApi.getParentInfo(1)
      .then(resp => {
        if (resp.code === 10000) {
          categoryGoodsList.value = resp.data
        }
      })
}

//  跳转到商品详情
const toGoodsView = (id) => {
  router.push({
    path:'/user/goods',
    query:{
      id
    }
  })
}

getCategoryGoodsList()
</script>

<style scoped>

.ad {
  margin: 20px 0px;
}

.ad ul li {
  float: left;
  width: 285px;
  margin-right: 20px;
}

.ad ul li .el-image {
  border-radius: 7px;
}

.ad ul li:nth-child(4n) {
  margin-right: 0px;
}

.recom {
  margin-bottom: 20px;
}

.recom .goodList ul li {
  width: 224px;
  float: left;
  text-align: center;
  margin-right: 20px;
  margin-bottom: 10px;
  background-color: #EEE;
  cursor: pointer;
  border-radius: 7px;
}

.recom .goodList ul li:hover {
  box-shadow: 0px 0px 20px;
  background-color: #716f6f;
}

.recom .goodList ul li:nth-child(5n) {
  margin-right: 0px;
}

.recom .goodList ul li .pic .el-image {
  border-radius: 7px;
}

.recom .category {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recom .name {
  font-weight: bold;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recom .dscp {
  color: #AAA;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recom .price {
  font-size: 14px;
  color: var(--theme-color);
}

.name, .price, .dscp {
  line-height: 25px;
}
</style>